<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <nav-bar title="生命教育"></nav-bar>

        <!-- 主要功能区 - 移除了scroll-view包裹 -->
        <view class="main-content">
            <!-- 生命教育模块 -->
            <view class="module-section">
                <view class="module-header">
                    <text class="module-title">探索生命</text>
                    <text class="module-desc">寻找生命的本质与意义</text>
                </view>
                <!-- 使用scroll-view仅包裹卡片区域，实现横向滚动 -->
                <scroll-view scroll-x class="education-cards-scroll" show-scrollbar="false">
                    <view class="education-cards">
                        <view class="education-card" @click="navigateTo('/pages/storylibrary/education/concept')">
                            <image class="card-image" src="/assets/education/life-concept.png"></image>
                            <view class="card-content">
                                <text class="card-title">生命概念</text>
                                <text class="card-desc">探索生命的本质与起源</text>
                            </view>
                        </view>
                        <view class="education-card" @click="navigateTo('/pages/storylibrary/education/value')">
                            <image class="card-image" src="/assets/education/life-value.png"></image>
                            <view class="card-content">
                                <text class="card-title">生命价值</text>
                                <text class="card-desc">思考生命的价值与尊严</text>
                            </view>
                        </view>
                        <view class="education-card" @click="navigateTo('/pages/storylibrary/education/meaning')">
                            <image class="card-image" src="/assets/education/life-meaning.png"></image>
                            <view class="card-content">
                                <text class="card-title">生命意义</text>
                                <text class="card-desc">寻找生命的意义与目的</text>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>

            <!-- 推荐阅读 -->
            <!-- <view class="module-section">
                <view class="module-header">
                    <text class="module-title">推荐阅读</text>
                    <text class="module-more" @click="navigateTo('/pages/storylibrary/education/articles')">更多
                        ></text>
                </view>
                <view class="article-list">
                    <view class="article-item">
                        <image class="article-image" src="/static/article1.png"></image>
                        <view class="article-info">
                            <text class="article-title">生命的意义：从哲学角度探讨</text>
                            <text class="article-summary">本文从哲学角度探讨生命的意义与价值...</text>
                            <text class="article-meta">阅读量: 1.2k · 10分钟阅读</text>
                        </view>
                    </view>
                    <view class="article-item">
                        <image class="article-image" src="/static/article2.png"></image>
                        <view class="article-info">
                            <text class="article-title">珍视当下：生命的价值与尊严</text>
                            <text class="article-summary">如何在日常生活中体现生命的价值与尊严...</text>
                            <text class="article-meta">阅读量: 980 · 8分钟阅读</text>
                        </view>
                    </view>
                </view>
            </view> -->
        </view>
    </view>

</template>

<script>
import NavBar from '@/components/NavBar.vue'


export default {
    components: {
        NavBar
    },
    data() {
        return {

        };
    },
    methods: {
        navigateTo(url) {
            uni.navigateTo({
                url: url
            });
        }
    }
};
</script>

<style>
/* @import '/pages/storylibrary/education/index.css'; */
/* 统一样式 */
@import '../index.css';

.education-cards-scroll {
    width: 100%;
    white-space: nowrap;
}

.education-cards {
    display: flex;
    padding: 10px 0;
}

.education-card {
    flex-shrink: 0;
    width: 200px;
    margin-right: 15px;
}

.user-info {
    display: flex;
    align-items: center;
}

.avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    margin-right: 15rpx;
}

.welcome {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
}

.search-box {
    background-color: #f5f5f5;
    border-radius: 30rpx;
    padding: 10rpx 20rpx;
    width: 300rpx;
}

.search-box input {
    font-size: 24rpx;
    height: 40rpx;
    width: 100%;
}

/* 主内容区域样式 */
.main-content {
    /* flex: 1; */
    width: calc(100vw - 60rpx);
    padding: 30rpx;
}

.module-section {
    margin-bottom: 40rpx;
    background-color: #ffffff;
    border-radius: 15rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.module-header {
    margin-bottom: 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.module-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
    position: relative;
    padding-left: 20rpx;
}

/* .module-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 30rpx;
    background-color: #4caf50;
    border-radius: 4rpx;
} */

.module-desc {
    font-size: 26rpx;
    color: #666;
    margin-top: 5rpx;
}

.module-more {
    font-size: 24rpx;
    color: #4caf50;
}

/* 教育卡片样式 */
.education-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.education-card {
    width: 30%;
    background-color: #ffffff;
    border-radius: 12rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.education-card:active {
    transform: scale(0.98);
}

.card-image {
    width: 100%;
    height: 290rpx;
    object-fit: cover;
}

.card-content {
    padding: 15rpx;
}

.card-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
    display: block;
}

.card-desc {
    font-size: 22rpx;
    color: #666;
    display: block;
    line-height: 1.4;
}

/* 文章列表样式 */
.article-list {
    display: flex;
    flex-direction: column;
    gap: 25rpx;
}

.article-item {
    display: flex;
    background-color: #ffffff;
    border-radius: 12rpx;
    overflow: hidden;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.article-image {
    width: 180rpx;
    height: 120rpx;
    border-radius: 8rpx;
    object-fit: cover;
    margin-right: 20rpx;
}

.article-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-summary {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 10rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.article-meta {
    font-size: 22rpx;
    color: #999;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .education-card {
        width: 48%;
        margin-bottom: 20rpx;
    }

    .education-cards {
        justify-content: space-around;
    }
}

@media screen and (max-width: 480px) {
    .education-card {
        width: 100%;
        margin-bottom: 20rpx;
    }
}
</style>